<template>
  <div>
    <el-dialog
      :title="notEnoughInfo.notifyTitle"
      :visible.sync="notEnoughInfo.dialogVisible"
      width="30%"
    >
      <span>视频通话可用分钟数不足，通话将在{{time}}秒内解散，请知晓。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="notEnoughClose">直接关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'not-enough-dialog',
  data () {
    return {
      timer:null,
      time:60
    }
  },
  props:{
    notEnoughInfo:{
      type:Object,
      default:()=>({
        dialogVisible:false
      })
    },
    idx:{
      type:Number,
      default:0
    },
    leaveRoom:{
      type:Function,
      default:()=>()=>{}
    },
    closeNEDialog:{
      type:Function,
      default:()=>()=>{}
    }
  },
  mounted(){
    this.renderNotEnough()
  },
  methods: {
    /**
     * renderMessage 渲染视频/语音余额不足气泡
     */
    renderNotEnough() {
      this.timer = setInterval(()=>{
        this.time--
        if(this.time <= 0){
          // 调用解散房间接口
          this.$emit('leaveRoom', {data:this.notEnoughInfo, idx:this.idx})
          clearInterval(this.timer)
        }
      }, 1000)
    },
    notEnoughClose(){
      this.$emit('leaveRoom', {data:this.notEnoughInfo, idx:this.idx})
      this.timer && clearInterval(this.timer)
    },
  }
}
</script>

<style scoped lang='scss'>

</style>